<template>
	<view class="home">
		<u-sticky bgColor="#fff">
			<js-search-bar navTo="search/search"></js-search-bar>
		</u-sticky>
		<!-- #ifdef MP-WEIXIN -->
		<official-account></official-account>
		<!-- #endif -->
		<view class="container">
			<view class="swiperbox">
				<u-swiper
					@click="swiperNav"
					easingFunction="easeInCubic"
					circular
					:autoplay="true"
					:acceleration="true"
					indicator
					radius="16rpx"
					indicatorMode="dot"
					imgMode="widthFix"
					height="360rpx"
					:list="banner"
					keyName="image"
				></u-swiper>
			</view>
			<view class="headline">
				<view class="lbox">
					<text>火热新品</text>
				</view>
				<view class="rbox" @click="toNav(`search/result?tags=火热新品`)">
					<text>MORE</text>
				</view>
			</view>
			<goodList :list="xplist"></goodList>

			<view class="notice-warp">
				<swiper class="notice" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, i) in gglist" :key="i" @click="toNav(`article/article?id=${item.id}`)">
						<view class="swiper-item">
							<view class="lbox">
								<!-- <image v-if="item.originalPic" :src="item.originalPic" mode=""></image> -->
								<u--image v-if="item.originalPic" :showLoading="true" :src="item.originalPic" width="134rpx" height="134rpx"></u--image>
								<view class="inner" v-else>
									<text class="t1">{{ item.channel_title }}</text>
									<text class="t2" style="text-align: center">{{ item.title }}</text>
								</view>
							</view>
							<view class="rbox">
								<text class="rbox-title">{{ item.title }}</text>
								<text class="rbox-desc">{{ item.jianjie }}</text>
								<view class="row">
									<text>{{ item.dtTime }}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<template v-if="if_showMiaoSha">
				<view class="headline">
					<view class="lbox">
						<text>爆款秒杀</text>
					</view>
					<view class="rbox" @click="toNav(`goods/miaosha`)">
						<text>MORE</text>
					</view>
				</view>
				<goodList :list="mslist" @finish="finish" listStyle="2"></goodList>
			</template>

			<view class="headline">
				<view class="lbox">
					<text>热门推荐</text>
				</view>
				<view class="rbox" @click="toNav(`search/result?tags=热门推荐`)">
					<text>MORE</text>
				</view>
			</view>
			<goodList :list="list" listStyle="3"></goodList>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { updata_car_count, get_userInfo } from '@/common/common_fun.js';
import API from '@/common/api';
export default {
	name: 'home',
	data() {
		return {
			if_showMiaoSha: false,
			banner: [],
			xplist: [],
			mslist: [],
			gglist: [],
			list: [],
			status: '',
			userinfo: {},
			paging: {
				page: 1,
				pagenum: 20
			}
		};
	},
	computed: {
		...mapState(['config'])
	},
	onPageScroll(res) {
		res.scrollTop > 10 ? (this.opacity = 0) : (this.opacity = 1);
	},
	onLoad(data) {
		if (data.scene) {
			let str = decodeURIComponent(data.scene);
			let val = str.split('=')[1];
			uni.setStorageSync('invite_id', val);
			console.log('home--invite_id', val);
		} else {
			uni.removeStorageSync('invite_id');
		}
		if (data.invite_id) {
			uni.setStorageSync('invite_id', data.invite_id);
			console.log('home--invite_id-三个点分享', data.invite_id);
		} else {
			uni.removeStorageSync('invite_id');
		}
		uni.setNavigationBarTitle({ title: this.config.com_title || '鞋服在线' });
		this.reset();
		this.init();
		this.getList();
	},
	onShow() {
		updata_car_count();
	},
	onPullDownRefresh() {
		this.reset();
		this.init();
		this.getList();
	},
	onReachBottom() {
		if (this.status === 'nomore') return;
		this.getList();
	},
	methods: {
		swiperNav(e) {
			let inventory_id = this.banner[e].inventory_id;
			this.toNav(`goods/goodsDetail?id=${inventory_id}`);
		},
		async init() {
			{
				const res = await API.getJson('index_index', { position: 3 });
				const { code, data, message } = res;
				if (code === 1) {
					this.banner = data.banners;
				}
			}
			{
				const res = await API.getJson('product_plist', { tags: '火热新品', ...this.PagIng });
				uni.stopPullDownRefresh();
				const { code, data, message } = res;
				if (code === 1) {
					this.xplist = data;
				}
			}
			{
				const res = await API.getJson('index_newsList', {
					channel_id: 27,
					if_index: 0
				});
				const { code, data, message } = res;
				this.gglist = data.list;
			}

			{
				const res = await API.getJson('product_plist', { if_miaosha: 1, ...this.PagIng });
				const { code, data, message } = res;
				if (code === 1) {
					this.mslist = data;
					this.$nextTick(() => {
						this.if_showMiaoSha = !!data.length;
					});
				}
			}
		},
		finish() {
			API.getJson('product_plist', { if_miaosha: 1, ...this.PagIng }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.mslist = data;
				}
			});
		},
		getList() {
			this.status = 'loading';
			API.getJson('product_plist', { tags: '热门推荐', ...this.paging }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					if (data.length !== 0) this.list = this.list.concat(data);
					if (this.paging.pagenum === data.length) {
						this.paging.page += 1;
						this.status = 'loadmore';
					} else {
						this.status = 'nomore';
					}
				}
			});
		},
		reset() {
			this.PagIng.page = 1;
			this.paging.page = 1;
			this.xplist = [];
			this.mslist = [];
			this.list = [];
		}
	},
	onHide() {},
	onUnload() {},
	beforeDestroy() {}
};
</script>
<style lang="less">
.notice-warp {
	wx-swiper .wx-swiper-dots {
		width: calc(50% - 32rpx);

		display: flex;
		justify-content: flex-end;
		bottom: 35rpx;
		text-align: center;
		white-space: nowrap;
		-webkit-transform: translate(0%);
		transform: translate(0%);
	}

	wx-swiper .wx-swiper-dot {
		// 指示点元素默认样式
		width: 20rpx !important;
		height: 5rpx !important;
		border-radius: 0;
		background: #f7caca;
	}

	wx-swiper .wx-swiper-dot-active {
		background: #e54e4e;
	}
}
</style>
<style lang="less" scoped>
.home {
	.notice {
		margin-top: 40rpx;
		height: 182rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		/deep/ .uni-swiper-dots {
			width: calc(50% - 32rpx);

			display: flex;
			justify-content: flex-end;
			bottom: 35rpx;
			text-align: center;
			white-space: nowrap;
			-webkit-transform: translate(0%);
			transform: translate(0%);
			// 指示点整个区域
			// bottom: 100rpx;
		}
		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 20rpx !important;
			height: 5rpx !important;
			border-radius: 0;
			background: #f7caca;
			// border: 1rpx solid #E0B079;
		}
		/deep/ .uni-swiper-dot-active {
			// 指示点元素激活（当前选中）状态样式
			background: #e54e4e;
		}

		.swiper-item {
			display: flex;
			align-items: center;
			padding: 24rpx;
			.lbox {
				image {
					width: 134rpx;
					height: 134rpx;
					background: #e54e4e;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.inner {
					.flex-center-y();
					width: 134rpx;
					height: 134rpx;
					background: #e54e4e;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					overflow: hidden;
					.t1 {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ffffff;
					}
					.t2 {
						line-height: 1;
						font-size: 14rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
			.rbox {
				flex: 1;
				height: 134rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 24rpx;
				.rbox-title {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					.line-1();
				}
				.rbox-desc {
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					color: #333;
					.line-2();
				}
				.row {
					.flex-between();
					text:nth-of-type(1) {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
	.container {
		padding: 24rpx 32rpx;
	}
}
</style>
